mat-icon.avator {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 12px;
    overflow: hidden;
    order: 3;
}

.completion-status {
    order: -1;
    padding-right: 10px;
}

.completed {
    opacity: 0.6;
    color: #d9d9d9;
    text-decoration: line-through;
}

.due-date {
    background-color: #ff4f3e;
    color: #fff;
}

.alarm {
    font-size: 18px;
}

.bottom-bar {
    margin-top: 3px;
    margin-bottom: 2px;
    font-size: 10px;
    width: 100%;
    order: 1;
}

.content {
    order: 1;
    width: 100%;
    padding: 5px;
}

.normal {
    border-left: 3px solid #a6a6a6;
}

.important {
    border-left: 3px solid #ffaf38;
}

.emergency {
    border-left: 3px solid #f00;
}

.drag-start {
    opacity: 0.5;
    border: 2px dashed #ff525b;
}